<template>
  <div class="icon-selector">
    <!-- 搜索框 -->
    <div class="search-bar">
      <el-input
        v-model="searchText"
        placeholder="搜索图标..."
        clearable
        prefix-icon="fa fa-search"
      />
    </div>

    <!-- 图标分类 -->
    <div class="icon-categories">
      <el-button
        v-for="category in categories"
        :key="category.key"
        :type="selectedCategory === category.key ? 'primary' : ''"
        size="small"
        @click="selectedCategory = category.key"
      >
        {{ category.name }}
      </el-button>
    </div>

    <!-- 图标网格 -->
    <div class="icon-grid" v-loading="loading">
      <div
        v-for="icon in filteredIcons"
        :key="icon"
        class="icon-item"
        :class="{ active: selected === icon }"
        @click="selectIcon(icon)"
      >
        <i :class="icon" class="icon"></i>
        <span class="icon-name">{{ icon }}</span>
      </div>
    </div>

    <!-- 底部操作 -->
    <div class="footer-actions">
      <el-button @click="$emit('close')">取消</el-button>
      <el-button type="primary" @click="confirmSelect" :disabled="!selected">
        确定选择
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { dynamicMenuApi } from '@/api/dynamicMenu'

// Props
interface Props {
  selected?: string
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits<{
  select: [icon: string]
  close: []
}>()

// 响应式数据
const searchText = ref('')
const selectedCategory = ref('all')
const selected = ref(props.selected || '')
const loading = ref(false)
const allIcons = ref<string[]>([])

// 图标分类
const categories = [
  { key: 'all', name: '全部' },
  { key: 'system', name: '系统' },
  { key: 'user', name: '用户' },
  { key: 'file', name: '文件' },
  { key: 'network', name: '网络' },
  { key: 'device', name: '设备' },
  { key: 'ui', name: '界面' },
  { key: 'media', name: '媒体' },
  { key: 'brand', name: '品牌' }
]

// 图标分类映射
const iconCategories: Record<string, string[]> = {
  system: [
    'fa-dashboard', 'fa-cogs', 'fa-settings', 'fa-gear', 'fa-wrench', 'fa-tools',
    'fa-server', 'fa-database', 'fa-terminal', 'fa-code', 'fa-bug', 'fa-shield'
  ],
  user: [
    'fa-user', 'fa-users', 'fa-group', 'fa-user-plus', 'fa-user-minus',
    'fa-user-circle', 'fa-user-tag', 'fa-id-card', 'fa-address-book'
  ],
  file: [
    'fa-file', 'fa-folder', 'fa-folder-open', 'fa-file-text', 'fa-file-code',
    'fa-file-image', 'fa-file-pdf', 'fa-file-excel', 'fa-file-word', 'fa-archive'
  ],
  network: [
    'fa-wifi', 'fa-globe', 'fa-network-wired', 'fa-cloud', 'fa-download',
    'fa-upload', 'fa-sync', 'fa-refresh', 'fa-link', 'fa-unlink'
  ],
  device: [
    'fa-laptop', 'fa-desktop', 'fa-mobile', 'fa-tablet', 'fa-tv',
    'fa-gamepad', 'fa-keyboard', 'fa-mouse', 'fa-headphones', 'fa-microphone'
  ],
  ui: [
    'fa-home', 'fa-search', 'fa-filter', 'fa-sort', 'fa-list', 'fa-th',
    'fa-table', 'fa-calendar', 'fa-clock', 'fa-bell', 'fa-envelope'
  ],
  media: [
    'fa-play', 'fa-pause', 'fa-stop', 'fa-forward', 'fa-backward',
    'fa-volume-up', 'fa-volume-down', 'fa-mute', 'fa-camera', 'fa-video',
    'fa-image', 'fa-music'
  ],
  brand: [
    'fa-linux', 'fa-windows', 'fa-apple', 'fa-android', 'fa-docker',
    'fa-git', 'fa-github', 'fa-gitlab', 'fa-html5', 'fa-css3', 'fa-js', 'fa-python'
  ]
}

// 计算属性
const filteredIcons = computed(() => {
  let icons = allIcons.value

  // 按分类过滤
  if (selectedCategory.value !== 'all') {
    icons = iconCategories[selectedCategory.value] || []
  }

  // 按搜索文本过滤
  if (searchText.value) {
    const search = searchText.value.toLowerCase()
    icons = icons.filter(icon => 
      icon.toLowerCase().includes(search)
    )
  }

  return icons
})

// 方法
const selectIcon = (icon: string) => {
  selected.value = icon
}

const confirmSelect = () => {
  if (selected.value) {
    emit('select', selected.value)
  }
}

const loadIcons = async () => {
  loading.value = true
  try {
    const response = await dynamicMenuApi.getAvailableIcons()
    if (response.success) {
      allIcons.value = response.data
    }
  } catch (error) {
    console.error('加载图标失败:', error)
    // 使用默认图标列表
    allIcons.value = [
      ...iconCategories.system,
      ...iconCategories.user,
      ...iconCategories.file,
      ...iconCategories.network,
      ...iconCategories.device,
      ...iconCategories.ui,
      ...iconCategories.media,
      ...iconCategories.brand
    ]
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  loadIcons()
})
</script>

<style lang="scss" scoped>
.icon-selector {
  .search-bar {
    margin-bottom: 16px;
  }
  
  .icon-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
    margin-bottom: 20px;
    
    .icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 12px 8px;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: rgba(255, 255, 255, 0.05);
      
      &:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(0, 234, 255, 0.5);
        transform: translateY(-2px);
      }
      
      &.active {
        background: rgba(0, 234, 255, 0.2);
        border-color: #00eaff;
        
        .icon {
          color: #00eaff;
        }
      }
      
      .icon {
        font-size: 24px;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 8px;
        transition: color 0.3s ease;
      }
      
      .icon-name {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.6);
        text-align: center;
        word-break: break-all;
        line-height: 1.2;
      }
    }
  }
  
  .footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

// 滚动条样式
.icon-grid::-webkit-scrollbar {
  width: 6px;
}

.icon-grid::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.icon-grid::-webkit-scrollbar-thumb {
  background: rgba(0, 234, 255, 0.5);
  border-radius: 3px;
  
  &:hover {
    background: rgba(0, 234, 255, 0.7);
  }
}

// Element Plus 样式覆盖
:deep(.el-input__inner) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  
  &::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}

:deep(.el-button) {
  &.el-button--primary {
    background: linear-gradient(135deg, #00eaff, #0099cc);
    border: none;
    
    &:hover {
      background: linear-gradient(135deg, #00d4e6, #0088bb);
    }
  }
  
  &:not(.el-button--primary) {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    
    &:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.3);
    }
  }
}
</style>
